<template>
  <div id="left_menu" :class="{fold}"
       @mouseenter="foldDebounce.debounce()"
       @mouseleave="foldDebounce.debounce()"
       @mousemove="foldDebounce.debounce()">
    <IconItem name="Menu" icon="ri-menu-4-line" :pointer="false"/>
    <IconItem v-for="(item, index) in topItemContainer" :key="item?.path"
              :item="item" :tabindex="index"/>
    <span class="place_holder"/>
    <IconItem v-for="(item, index) in bottomItemContainer" :key="item?.path"
              :item="item" :tabindex="topItemContainer.length + index"/>
  </div>
</template>

<script>
import Debounce from "@/utils/Debounce";
import {reactive, toRefs} from "vue"
import {routes} from "@/router";
import IconItem from "@/components/IconItem";

export default {
  name: "LeftMenu",
  components: {IconItem},
  setup() {
    let data = reactive({
      fold: true,
      topItemContainer: [],
      bottomItemContainer: [],
    })

    let separateIndex = 2
    data.bottomItemContainer.push(...routes.slice(routes.length - separateIndex, routes.length))
    data.topItemContainer.push(...routes.slice(0, routes.length - separateIndex))

    let foldDebounce = new Debounce(() => data.fold = false, () => data.fold = true, 3000)
    return {...toRefs(data), foldDebounce, routes}
  }
}
</script>

<style scoped lang="less">
#left_menu.fold {
  --container-height: 200px;
  --container-top: calc(50vh - var(--container-height) / 2);
  --container-width: 7px;
  --container-margin-left: 20px;
  --container-border-radius: 5px;
  --container-bg-color: rgba(255, 255, 255, 0.7);
  --item-opacity: 0;

  --item-transition: opacity .3s ease;
}

.global_dark #left_menu {
  --container-bg-color: rgba(0, 0, 0, 0.3);

  &.fold {
    --container-bg-color: rgba(0, 0, 0, 0.7);
  }
}

#left_menu {
  --container-width: 64px;
  --container-height: 100vh;
  --container-top: 0;
  --container-margin-left: 0;
  --container-border-radius: 0;
  --container-bg-color: rgba(255, 255, 255, 0.2);
  --container-transition: all .5s ease;
  --item-opacity: 1;
  --item-transition: opacity .3s ease .2s;

  top: var(--container-top);
  height: var(--container-height);
  width: var(--container-width);
  margin-left: var(--container-margin-left);
  border-radius: var(--container-border-radius);

  z-index: 2000;
  position: fixed;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;

  backdrop-filter: blur(5px);
  background-color: var(--container-bg-color);
  box-shadow: rgba(100, 100, 100, 0.5) 0 2px 5px -5px;
  transition: var(--container-transition);

  & > * {
    opacity: var(--item-opacity);
    transition: var(--item-transition);
  }
}

.place_holder {
  flex-grow: 1;
}
</style>
